<template>
  <div class="app-container" v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="140px">
      <el-divider content-position="left">增值税发票</el-divider>
      <el-form-item label="增值税发票类型" prop="invoiceTypeId">
        <el-radio-group v-model="form.invoiceTypeId">
          <el-radio v-for="item in invoiceTypeList" :label="item.invoiceTypeId" :key="item.invoiceTypeId">{{item.invoiceTypeName}}</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-divider content-position="left">结算费率</el-divider>
      <el-form-item label="常规费率/%" prop="conventionRate">
        <el-input-number :min="0" :precision="2" :max="100" v-model="form.conventionRate" placeholder="请输入常规费率" />
      </el-form-item>

      <el-form-item label="特殊费率/%" prop="specialRate">
        <el-input-number :min="0" :precision="2" :max="100" v-model="form.specialRate" placeholder="请输入特殊费率" />
      </el-form-item>


      <el-divider content-position="left">审核</el-divider>
      <el-form-item label="自动审核" prop="isAutomaticReview">
        <el-radio-group v-model="form.isAutomaticReview">
          <el-radio :label="1">开启</el-radio>
          <el-radio :label="0">关闭</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-divider content-position="left">创客限额</el-divider>
      <el-form-item label="创客每月限额" prop="monthlyLimit">
        <el-popover placement="top-start" title="" width="200" trigger="hover" content="为0不限制">
          <el-input-number slot="reference" v-model="form.monthlyLimit" :min="0" :precision="2" :max="100" label="请输入创客每月限额"></el-input-number>
        </el-popover>
      </el-form-item>

    </el-form>

    <div class="dialog-footer">
      <el-button type="primary" @click="submitForm">提 交</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { getSettlementQuery, updateSettlement} from "@/api/system/tax_territory";
import {listInvoiceType} from "@/api/system/InvoiceType";

export default {
  name: "taxTerritorySettlement",
  props:{
    organizationId:{
      type:String,
    },
  },
  data() {
    return{
      loading:false,
      form:{
        specialRate:0,
        monthlyLimit:0,
        invoiceTypeId:"",
        conventionRate:0,
        organizationsId:"",
        isAutomaticReview:1
      },
      invoiceTypeList:[],
      // 表单校验
      rules: {
        specialRate: [
          { required: true, message: "请输入特殊费率", trigger: ["blur","change"] }
        ],
        conventionRate: [
          { required: true, message: "请输入常规费率", trigger: ["blur","change"] }
        ],
        invoiceTypeId: [
          { required: true, message: "请选择增值税发票类型", trigger: ["blur","change"] }
        ],
      }
    }
  },
  mounted() {
    listInvoiceType().then(res=>{
      this.invoiceTypeList = res.rows
    })
  },
  methods:{

    getDetail(){
      this.loading = true
      getSettlementQuery(this.organizationId).then(res=>{
        this.loading = false
        if (res.data){
          this.form = res.data
        }
      }).catch(()=>{
        this.loading = false
      })
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true
          updateSettlement(this.form).then(response => {
            this.loading = false
            this.$modal.msgSuccess("保存成功")
            this.handleCancel(true)
            this.active++
          }).catch(()=>{
            this.loading = false
          })
        }
      })

    },

    handleCancel(val){
      this.$emit("cancel",val)
    },
  },
  watch:{
    organizationId:{
      handler(val){
        // console.log(this.active)
        if (val){
          this.getDetail()
        }
      },
      immediate:true
    },
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-col{
  .el-form-item{
    width: 100%;
    .el-date-editor{
      width: 100%;
    }
  }
}
.line{
  text-align: center;
}

::v-deep .el-radio-group{
  .el-radio{
    height: 36px;
    line-height: 35px;
  }
}
</style>
